<template>
  <div class="lookQa">
    <div class="feedback">
      <!-- {{ list }} -->
      <div class="item" :key="item.id" v-for="item in list">
        <div class="top">
          <div class="name">
            <div>
              <div class="info3">
                <span>【编号{{ item.number }}】</span>
                <img class="photo" :src="item.headUrl" alt="" />
                <span>用户</span><span>{{ item.userNickName }}:</span>
                {{ item.createTime }}
              </div>

              <div class="name22">
                <span v-html="item.issue"></span>
                <!-- {{ item.issue }} -->
                <span v-if="hasqa" class="goAnswer" @click="goAnswer(item)"
                  >继续提问</span
                >
              </div>
            </div>
            <div class="imgs" style="margin-left: 60px">
              <template v-if="item.imgUrlList">
                <el-image
                  :key="index1"
                  v-for="(inner, index1) in item.imgUrlList"
                  style="width: 100px; height: 70px; margin-right: 15px"
                  :src="inner"
                  :preview-src-list="item.imgUrlList"
                >
                </el-image>
              </template>

              <!-- <img
                v-if="item.videoUrl"
                style="
                  width: 100px;
                  height: 70px;
                  margin-left: 15px;
                  cursor: pointer;
                "
                @click="vadioPlay(item.videoUrl)"
                src="../assets/2pxicon_video1_s.png"
                alt=""
              /> -->
              <div
                @click="vadioPlay(item.videoUrl)"
                v-if="item.videoUrl"
                class="video"
              >
                <video :src="item.videoUrl"></video>
                <div class="mask">
                  <img src="../assets/24gf-playCircle.png" alt="" />
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="time">{{ item.createTime }}</div> -->
        </div>

        <div
          class="top"
          :key="index5"
          v-for="(inner, index5) in item.issueAnswerVoList"
          style="margin-left: 80px"
        >
          <div class="name">
            <div style="color: #25a2ab">
              <div class="info3">
                <!-- ../assets/login/logo.png -->
                <img class="photo" :src="inner.headUrl" alt="" />
                <span>技术顾问</span>
                <span>{{ inner.userNickName }}:</span> {{ inner.createTime }}
              </div>
              <!-- 4444444444444444444444 -->

              <div class="quit" v-if="inner.quoteIssue">
                  <!-- {{ inner2.quoteIssue }} -->

                  <div>
                    <div
                      class="item"
                      :key="h"
                      v-for="(item77, h) in [inner.quoteIssue]"
                    >
                      <div class="top">
                        <div class="name">
                          <div>
                            <div class="info3">
                              <span>【编号{{ item77.number }}】</span>
                              <img class="photo" :src="item77.headUrl" alt="" />
                              <span>用户</span
                              ><span>{{ item77.userNickName }}:</span>
                              {{ item77.createTime }}
                            </div>

                            <div class="name22">
                              <span v-html="item77.issue"></span>
                              <!-- {{ item.issue }} -->
                            </div>
                          </div>
                          <div class="imgs" style="margin-left: 60px">
                            <template v-if="item77.imgUrlList">
                              <el-image
                                :key="index1"
                                v-for="(inner77, index1) in item77.imgUrlList"
                                style="
                                  width: 100px;
                                  height: 70px;
                                  margin-right: 15px;
                                "
                                :src="inner77"
                                :preview-src-list="item77.imgUrlList"
                              >
                              </el-image>
                            </template>

                            <div
                              @click="vadioPlay(item77.videoUrl)"
                              v-if="item77.videoUrl"
                              class="video"
                            >
                              <video :src="item77.videoUrl"></video>
                              <div class="mask">
                                <img
                                  src="../assets/2pxicon_video1_s.png"
                                  alt=""
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div
                        class="top"
                        :key="index5"
                        v-for="(item88, index5) in item77.issueAnswerVoList"
                        style="margin-left: 80px"
                      >
                        <div class="name">
                          <div style="color: #25a2ab">
                            <div class="info3">
                              <img class="photo" :src="item88.headUrl" alt="" />
                              <span>技术顾问</span>
                              <span>{{ item88.userNickName }}:</span>
                              {{ item88.createTime }}
                            </div>

                            <div style="margin-left: 0" class="name22">
                              <span
                                v-html="
                                  item88.issue &&
                                  item88.issue.replace(
                                    /(\r\n|\n|\r)/gm,
                                    '<br />'
                                  )
                                "
                              ></span>
                            </div>
                          </div>
                          <div class="imgs">
                            <template v-if="item88.imgUrlList">
                              <el-image
                                :key="index1"
                                v-for="(inner17, index1) in item88.imgUrlList"
                                style="
                                  width: 100px;
                                  height: 70px;
                                  margin-right: 15px;
                                "
                                :src="inner17"
                                :preview-src-list="item88.imgUrlList"
                              >
                              </el-image>
                            </template>

                            <div
                              @click="vadioPlay(item88.videoUrl)"
                              v-if="item88.videoUrl"
                              class="video"
                            >
                              <video :src="item88.videoUrl"></video>
                              <div class="mask">
                                <img
                                  src="../assets/2pxicon_video1_s.png"
                                  alt=""
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div
                        class="top"
                        :key="index"
                        v-for="(item88, index) in item77.slaveIssueList"
                        style="margin-left: 80px"
                      >
                        <div class="name">
                          <div style="color: #25a2ab">
                            <div class="info3">
                              <img class="photo" :src="item88.headUrl" alt="" />
                              <span>用户</span>

                              <span>{{ item88.userNickName }}:</span>
                              {{ item88.createTime }}
                            </div>

                            <div
                              style="margin-left: 0; color: #2a2c2e"
                              class="name22"
                            >
                              <span v-html="item88.issue"></span>
                            </div>
                          </div>
                          <div class="imgs">
                            <template v-if="item88.imgUrlList">
                              <el-image
                                :key="index1"
                                v-for="(inner19, index1) in item88.imgUrlList"
                                style="
                                  width: 100px;
                                  height: 70px;
                                  margin-right: 15px;
                                "
                                :src="inner19"
                                :preview-src-list="item88.imgUrlList"
                              >
                              </el-image>
                            </template>

                            <div
                              @click="vadioPlay(item88.videoUrl)"
                              v-if="item88.videoUrl"
                              class="video"
                            >
                              <video :src="item88.videoUrl"></video>
                              <div class="mask">
                                <img
                                  src="../assets/2pxicon_video1_s.png"
                                  alt=""
                                />
                              </div>
                            </div>
                          </div>
                        </div>

                        <div
                          :key="index2"
                          v-for="(
                            iteminer2, index2
                          ) in item88.issueAnswerVoList"
                        >
                          <div class="name">
                            <div style="color: #25a2ab">
                              <div class="info3">
                                <img
                                  class="photo"
                                  :src="iteminer2.headUrl"
                                  alt=""
                                />
                                <span>技术顾问</span>

                                <span>{{ iteminer2.userNickName }}:</span>
                                {{ iteminer2.createTime }}
                              </div>

                              <div style="margin-left: 0" class="name22">
                                <span
                                  v-html="
                                    iteminer2.answer &&
                                    iteminer2.answer.replace(
                                      /(\r\n|\n|\r)/gm,
                                      '<br />'
                                    )
                                  "
                                ></span>
                              </div>
                            </div>
                            <div class="imgs">
                              <template v-if="iteminer2.imgUrlList">
                                <el-image
                                  :key="index1"
                                  v-for="(
                                    inner33, index1
                                  ) in iteminer2.imgUrlList"
                                  style="
                                    width: 100px;
                                    height: 70px;
                                    margin-right: 15px;
                                  "
                                  :src="inner33"
                                  :preview-src-list="iteminer2.imgUrlList"
                                >
                                </el-image>
                              </template>

                              <div
                                @click="vadioPlay(iteminer2.videoUrl)"
                                v-if="iteminer2.videoUrl"
                                class="video"
                              >
                                <video :src="iteminer2.videoUrl"></video>
                                <div class="mask">
                                  <img
                                    src="../assets/2pxicon_video1_s.png"
                                    alt=""
                                  />
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 3333333333333333 -->

              <div style="margin-left: 0" class="name22">
                <span
                  v-html="
                    inner.issue &&
                    inner.issue.replace(/(\r\n|\n|\r)/gm, '<br />')
                  "
                ></span>

                <!-- {{ inner.issue }}  -->
              </div>
            </div>
            <div class="imgs">
              <template v-if="inner.imgUrlList">
                <el-image
                  :key="index1"
                  v-for="(inner1, index1) in inner.imgUrlList"
                  style="width: 100px; height: 70px; margin-right: 15px"
                  :src="inner1"
                  :preview-src-list="inner.imgUrlList"
                >
                </el-image>
              </template>

              <!-- <img
                v-if="inner.videoUrl"
                style="
                  width: 100px;
                  height: 70px;
                  margin-left: 15px;
                  cursor: pointer;
                "
                @click="vadioPlay(inner.videoUrl)"
                src="../assets/2pxicon_video1_s.png"
                alt=""
              /> -->

              <div
                @click="vadioPlay(inner.videoUrl)"
                v-if="inner.videoUrl"
                class="video"
              >
                <video :src="inner.videoUrl"></video>
                <div class="mask">
                  <img src="../assets/24gf-playCircle.png" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>

        <div
          class="top"
          :key="index"
          v-for="(inner, index) in item.slaveIssueList"
          style="margin-left: 80px"
        >
          <div class="name">
            <div style="color: #25a2ab">
              <div class="info3">
                <!-- ../assets/login/logo.png -->
                <img class="photo" :src="inner.headUrl" alt="" />
                <span>用户</span>

                <!-- {{ inner.issueAnswerVoList?"客服":'客户' }} -->
                <span>{{ inner.userNickName }}:</span> {{ inner.createTime }}
              </div>

              <div style="margin-left: 0; color: #2a2c2e" class="name22">
                <span v-html="inner.issue"></span>

                <!-- {{ inner.issue }} -->
                <span v-if="hasqa" class="goAnswer" @click="goAnswer(item)"
                  >继续提问</span
                >
              </div>
            </div>
            <div class="imgs">
              <template v-if="inner.imgUrlList">
                <el-image
                  :key="index1"
                  v-for="(inner1, index1) in inner.imgUrlList"
                  style="width: 100px; height: 70px; margin-right: 15px"
                  :src="inner1"
                  :preview-src-list="inner.imgUrlList"
                >
                </el-image>
              </template>

              <!-- <img
                v-if="inner.videoUrl"
                style="
                  width: 100px;
                  height: 70px;
                  margin-left: 15px;
                  cursor: pointer;
                "
                @click="vadioPlay(inner.videoUrl)"
                src="../assets/2pxicon_video1_s.png"
                alt=""
              /> -->
              <div
                @click="vadioPlay(inner.videoUrl)"
                v-if="inner.videoUrl"
                class="video"
              >
                <video :src="inner.videoUrl"></video>
                <div class="mask">
                  <img src="../assets/24gf-playCircle.png" alt="" />
                </div>
              </div>
            </div>
          </div>

          <div
            :key="index2"
            v-for="(inner2, index2) in inner.issueAnswerVoList"
          >
            <div class="name">
              <div style="color: #25a2ab">
                <div class="info3">
                  <!-- ../assets/login/logo.png -->
                  <img class="photo" :src="inner2.headUrl" alt="" />
                  <span>技术顾问</span>

                  <!-- {{ inner.issueAnswerVoList?"客服":'客户' }} -->
                  <span>{{ inner2.userNickName }}:</span>
                  {{ inner2.createTime }}
                </div>
                <!-- <div style="color: #333; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 5px 15px; margin: 0 0 0 10px; border-radius: 8px; font-size: 14px; background: #d5e1e2;">
              这是引用之前的回答：
              <span><i class="el-icon-arrow-down"></i></span>
            </div> -->
                <div class="quit" v-if="inner2.quoteIssue">
                  <!-- {{ inner2.quoteIssue }} -->

                  <div>
                    <div
                      class="item"
                      :key="h"
                      v-for="(item77, h) in [inner2.quoteIssue]"
                    >
                      <div class="top">
                        <div class="name">
                          <div>
                            <div class="info3">
                              <span>【编号{{ item77.number }}】</span>
                              <img class="photo" :src="item77.headUrl" alt="" />
                              <span>用户</span
                              ><span>{{ item77.userNickName }}:</span>
                              {{ item77.createTime }}
                            </div>

                            <div class="name22">
                              <span v-html="item77.issue"></span>
                              <!-- {{ item.issue }} -->
                            </div>
                          </div>
                          <div class="imgs" style="margin-left: 60px">
                            <template v-if="item77.imgUrlList">
                              <el-image
                                :key="index1"
                                v-for="(inner77, index1) in item77.imgUrlList"
                                style="
                                  width: 100px;
                                  height: 70px;
                                  margin-right: 15px;
                                "
                                :src="inner77"
                                :preview-src-list="item77.imgUrlList"
                              >
                              </el-image>
                            </template>

                            <div
                              @click="vadioPlay(item77.videoUrl)"
                              v-if="item77.videoUrl"
                              class="video"
                            >
                              <video :src="item77.videoUrl"></video>
                              <div class="mask">
                                <img
                                  src="../assets/2pxicon_video1_s.png"
                                  alt=""
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div
                        class="top"
                        :key="index5"
                        v-for="(item88, index5) in item77.issueAnswerVoList"
                        style="margin-left: 80px"
                      >
                        <div class="name">
                          <div style="color: #25a2ab">
                            <div class="info3">
                              <img class="photo" :src="item88.headUrl" alt="" />
                              <span>技术顾问</span>
                              <span>{{ item88.userNickName }}:</span>
                              {{ item88.createTime }}
                            </div>

                            <div style="margin-left: 0" class="name22">
                              <span
                                v-html="
                                  item88.issue &&
                                  item88.issue.replace(
                                    /(\r\n|\n|\r)/gm,
                                    '<br />'
                                  )
                                "
                              ></span>
                            </div>
                          </div>
                          <div class="imgs">
                            <template v-if="item88.imgUrlList">
                              <el-image
                                :key="index1"
                                v-for="(inner17, index1) in item88.imgUrlList"
                                style="
                                  width: 100px;
                                  height: 70px;
                                  margin-right: 15px;
                                "
                                :src="inner17"
                                :preview-src-list="item88.imgUrlList"
                              >
                              </el-image>
                            </template>

                            <div
                              @click="vadioPlay(item88.videoUrl)"
                              v-if="item88.videoUrl"
                              class="video"
                            >
                              <video :src="item88.videoUrl"></video>
                              <div class="mask">
                                <img
                                  src="../assets/2pxicon_video1_s.png"
                                  alt=""
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div
                        class="top"
                        :key="index"
                        v-for="(item88, index) in item77.slaveIssueList"
                        style="margin-left: 80px"
                      >
                        <div class="name">
                          <div style="color: #25a2ab">
                            <div class="info3">
                              <img class="photo" :src="item88.headUrl" alt="" />
                              <span>用户</span>

                              <span>{{ item88.userNickName }}:</span>
                              {{ item88.createTime }}
                            </div>

                            <div
                              style="margin-left: 0; color: #2a2c2e"
                              class="name22"
                            >
                              <span v-html="item88.issue"></span>
                            </div>
                          </div>
                          <div class="imgs">
                            <template v-if="item88.imgUrlList">
                              <el-image
                                :key="index1"
                                v-for="(inner19, index1) in item88.imgUrlList"
                                style="
                                  width: 100px;
                                  height: 70px;
                                  margin-right: 15px;
                                "
                                :src="inner19"
                                :preview-src-list="item88.imgUrlList"
                              >
                              </el-image>
                            </template>

                            <div
                              @click="vadioPlay(item88.videoUrl)"
                              v-if="item88.videoUrl"
                              class="video"
                            >
                              <video :src="item88.videoUrl"></video>
                              <div class="mask">
                                <img
                                  src="../assets/2pxicon_video1_s.png"
                                  alt=""
                                />
                              </div>
                            </div>
                          </div>
                        </div>

                        <div
                          :key="index2"
                          v-for="(
                            iteminer2, index2
                          ) in item88.issueAnswerVoList"
                        >
                          <div class="name">
                            <div style="color: #25a2ab">
                              <div class="info3">
                                <img
                                  class="photo"
                                  :src="iteminer2.headUrl"
                                  alt=""
                                />
                                <span>技术顾问</span>

                                <span>{{ iteminer2.userNickName }}:</span>
                                {{ iteminer2.createTime }}
                              </div>

                              <div style="margin-left: 0" class="name22">
                                <span
                                  v-html="
                                    iteminer2.answer &&
                                    iteminer2.answer.replace(
                                      /(\r\n|\n|\r)/gm,
                                      '<br />'
                                    )
                                  "
                                ></span>
                              </div>
                            </div>
                            <div class="imgs">
                              <template v-if="iteminer2.imgUrlList">
                                <el-image
                                  :key="index1"
                                  v-for="(
                                    inner33, index1
                                  ) in iteminer2.imgUrlList"
                                  style="
                                    width: 100px;
                                    height: 70px;
                                    margin-right: 15px;
                                  "
                                  :src="inner33"
                                  :preview-src-list="iteminer2.imgUrlList"
                                >
                                </el-image>
                              </template>

                              <div
                                @click="vadioPlay(iteminer2.videoUrl)"
                                v-if="iteminer2.videoUrl"
                                class="video"
                              >
                                <video :src="iteminer2.videoUrl"></video>
                                <div class="mask">
                                  <img
                                    src="../assets/2pxicon_video1_s.png"
                                    alt=""
                                  />
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div style="margin-left: 0" class="name22">
                  <span
                    v-html="
                      inner2.answer &&
                      inner2.answer.replace(/(\r\n|\n|\r)/gm, '<br />')
                    "
                  ></span>

                  <!-- <el-input
              disabled
  type="textarea"
  autosize
  placeholder="请输入内容"
  v-model="inner2.answer">
</el-input> -->
                </div>
              </div>
              <div class="imgs">
                <template v-if="inner2.imgUrlList">
                  <el-image
                    :key="index1"
                    v-for="(inner3, index1) in inner2.imgUrlList"
                    style="width: 100px; height: 70px; margin-right: 15px"
                    :src="inner3"
                    :preview-src-list="inner2.imgUrlList"
                  >
                  </el-image>
                </template>

                <!-- <img
                v-if="inner2.videoUrl"
                style="
                  width: 100px;
                  height: 70px;
                  margin-left: 15px;
                  cursor: pointer;
                "
                @click="vadioPlay(inner2.videoUrl)"
                src="../assets/2pxicon_video1_s.png"
                alt=""
              /> -->
                <div
                  @click="vadioPlay(inner2.videoUrl)"
                  v-if="inner2.videoUrl"
                  class="video"
                >
                  <video :src="inner2.videoUrl"></video>
                  <div class="mask">
                    <img src="../assets/24gf-playCircle.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
            <!-- {{ inner2 }} -->
          </div>
          <!-- <div class="time">{{ item.createTime }}</div> -->
        </div>
      </div>
    </div>

    <el-dialog
      v-if="dialogVisible1"
      title="播放视频"
      :visible.sync="dialogVisible1"
      width="70%"
    >
      <video-player
        class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="playerOptions"
      >
      </video-player>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="dialogVisible1 = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>

    <!-- 增加提问 -->
    <addQA
      :pid="pid"
      :curCate="curCate"
      v-if="addqaStatus"
      @fnaddqa="fnaddqa"
    />
  </div>
</template>

<script>
import addQA from "./addQA.vue";
export default {
  name: "lookQa",
  props: ["list", "type", "curCate", "hasqa"],
  components: {},
  components: { addQA },
  data() {
    return {
      pid: "",
      addqaStatus: false,
      playerOptions: {
        playbackRates: [1.0, 2.0, 3.0], // 播放速度
        autoplay: true, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:8", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4",
            src: "http://public-read-shengmu.oss-cn-beijing.aliyuncs.com/image/icon2/dfvideo.mp4",
          },
        ],
        poster: "", // 封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, // 全屏按钮
        },
      },
      dialogVisible1: false,
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
    };
  },
  computed: {},
  created() {},
  methods: {
    fnaddqa() {
      this.addqaStatus = false;
      this.$emit("refreshlist");
    },
    vadioPlay(val) {
      this.playerOptions.sources[0].src = val;
      this.dialogVisible1 = true;
      // console.log(this.$refs.videoPlayer)
    },
    goAnswer(item) {
      this.addqaStatus = true;
      this.pid = item.id;
      console.log(item.id, 77777777);
    },
  },
};
</script>

<style lang="scss" scoped>
.quit {
  background: #d5e1e2;
  border-radius: 8px;
  padding: 10px;
  margin: 10px 0 0 10px;
  .item {
    border-bottom: none !important;
  }
}
.video {
  width: 100px;
  height: 70px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  video {
    width: 100%;
    height: 100%;
  }
  .mask {
    position: absolute;
    cursor: pointer;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 30px;
      height: 30px;
    }
  }
}
.lookQa {
  .goAnswer {
    padding: 2px 10px;
    border-radius: 20px;
    background: rgb(37, 162, 171);
    color: #fff;
    cursor: pointer;
    margin: 8px 0 0 10px;
  }
  .feedback {
    .item {
      border-bottom: 1px solid #dfdede;
      margin-bottom: 15px;
      .top {
        // padding: 20px 0;
        // display: flex;
        // align-items: center;
        // justify-content: space-between;
        .name22 {
          font-size: 14px;
          margin: 10px 0 0 80px;
        }
        .name {
          flex: 1;
          .info3 {
            align-items: center;
            display: flex;
            color: #323232;
            font-size: 14px;

            span {
              font-weight: bold;
              font-size: 14px;
              padding: 5px 2px;
            }
            > div {
              flex: 1;
              padding-top: 5px;
              padding-left: 10px;
            }
          }
          .imgs {
            margin: 15px 0;
          }
        }
        .time {
          font-size: 13px;
          color: #999;
        }
        .photo {
          border: 1px solid #323232;
          width: 25px;
          height: 25px;
          border-radius: 50%;
          margin-right: 8px;
        }
      }
    }
  }
}
</style>
